<template>
  <a-card>
    <!-- <p>数据敏感度设置说明：</p>
    <p>个人信息，敏感度从高到低，分为匿名化个人信息、去标识化个人信息，一般个人信息和敏感个人信息共四个级别</p>
    <p style="margin-bottom: 10px;">车联网数据，敏感度从低到高，分为一般属性数据、重要属性数据、敏感属性数据、重要数据共4个级别。</p> -->
    <div style="display: flex; justify-content: flex-end;margin-bottom: 20px;">
      <a-button type="primary" icon="plus" @click="showModal()">{{ $t('user.v147') }}</a-button>
    </div>
    <a-table :pagination="false"  :data-source="listData" :rowKey="record => record.Id">
      <a-table-column key="Id" data-index="Id">
        <span slot="title" class="min-w-90p">{{ $t(  'user.verification-code.required111566110577115') }}</span>
      </a-table-column>
      <a-table-column key="SensitivityLevel" :title="$t( 'app.setting.themecolor.green')">
        <template slot-scope="text, record">
          <span>{{ isLang?record.SensitivityLevel.split('/')[0]:record.SensitivityLevel.split('/')[1] }}</span>
        </template>
        <!-- <span slot="title" class="min-w-90p">{{ $t( 'app.setting.themecolor.green') }}</span> -->
      </a-table-column>
      <a-table-column key="action" :title="$t('app.setting.othersettings')">
        <template slot-scope="text, row">
          <span>
            <a-button type="link" @click="showModal(row.Id)">{{ $t('user.verification-code.required111566147')
              }}</a-button>
          <a-popconfirm :title="$t( 'user.verification-code.required111566110577223')" :ok-text="$t('user.verification-code.required1166')" :cancel-text="$t('user.email.required11')" @confirm="handleClickDelete(row.Id)" @cancel="cancel">
            <a-button type="link">{{ $t('app.setting.copy') }}</a-button>
          </a-popconfirm>
          </span>
        </template>
      </a-table-column>
    </a-table>
    <!-- 分页 -->
    <a-pagination size="small" v-model="queryForm.page" :total="total" hideOnSinglePage
    :pageSize.sync="queryForm.pageSize" @change="getList"/>
    <a-drawer
      :title="modalTitle"
      placement="right"
      :closable="false"
      :visible="modalVisible"
      @close="closeDrawer"
      :width="500"
    >
      <a-form v-model="addForm" :label-col="{ span: 5 }" :wrapper-col="{ span: 19 }" labelAlign="left">
        <a-form-item
          :label="$t('user.verification-code.required111566110577115')"
          v-show="addForm.id"
          class="sp-item"
        >
          {{ addForm.id }}
        </a-form-item>
        <a-form-item :label="$t('app.setting.themecolor.green')">
        <br>
        <a-input v-model="addForm.SensitivityLevel" :placeholder="$t('user.verification-code.required1115661105771382342')" style="margin-left: -80px;"/></a-form-item>
      </a-form>
      <div :style="{
        position: 'absolute',
        right: 0,
        bottom: 0,
        width: '100%',
        borderTop: '1px solid #e9e9e9',
        padding: '10px 16px',
        background: '#fff',
        textAlign: 'center',
        zIndex: 1,
      }">
        <a-button style="margin-right: 8px" @click="closeDrawer">{{ $t('user.email.required11') }}</a-button>
        <a-button type="primary" @click="subAddForm">{{ $t( 'user.verification-code.required1166') }}</a-button>
      </div>
    </a-drawer>
  </a-card>
</template>

<script>

import { sensitivityList, sensitivityCreate, sensitivityChange, sensitivityDelete, sensitivityDetails } from "@/api/ytdg"
const columns = [
  {
    title: '序号',
    dataIndex: 'Id',
    align: 'center',
  },
  // {
  //   title: '数据分类',
  //   dataIndex: 'DateLevel',
  //   align: 'center',
  // },
  // {
  //   title: '数据级别',
  //   dataIndex: 'DateIllustrate',
  //   align: 'center',
  // },
  {
    title: '数据敏感度',
    dataIndex: 'SensitivityLevel',
    align: 'center',
  },
  {
    title: '操作',
    width: '150px',
    dataIndex: '',
    align: 'center',
    scopedSlots: { customRender: 'action' },
  },
];
export default {
  data() {
    return {
      columns,
      modalVisible: false,
      modalTitle: '',
      isLang:localStorage.getItem("lang").includes("zh-CN"),
      listData: [],
      total: 0,
      queryForm: {
        page: 1,
        pageSize: 10
      },
      addForm: {
        SensitivityLevel: undefined,
      },
    };
  },
  created() {
    this.getList()
  },
  mounted(){
    let that=this;
    window.addEventListener('setItemEvent', function(e) {
      if(e.key=='lang'){
        let lang= JSON.parse(e.value)
        console.log(lang);
        if(lang == 'zh-EN'){
          that.isLang=false;
        }else{
          that.isLang=true
        
        }
      }
    })
  },
  methods: {
    getList() {
      sensitivityList(this.queryForm).then((res) => {
        this.listData = res.data.Lists
        this.total = res.data.Total
      })
    },
    showModal(id) {
      if (id) {
        this.modalTitle = this.$t('user.verification-code.required1115661105771387788')
      
        sensitivityDetails({ id }).then((res) => {
          this.addForm = res.data[0]
          this.addForm.id = id
          this.modalVisible = true;
        })
      } else {
        this.modalTitle = this.$t( 'user.verification-code.required111566110577138556655')
      }
      this.modalVisible = true;
    },
    // 关闭抽屉
    closeDrawer() {
      this.addForm = {
        SensitivityLevel: undefined,
        id: undefined
      }
      this.modalVisible = false
    },

    // 新增
    subAddForm() {
      if (this.addForm.id) {
        sensitivityChange(this.addForm).then(() => {
          this.$message.success(this.$t( 'user.verification-code.required111566110577229'))
          this.getList()
          this.closeDrawer()
        },(err)=>{
          this.$message.error(err)
        })
      } else {
        sensitivityCreate(this.addForm).then(() => {
          this.$message.success(this.$t( 'user.verification-code.required111566110577230'))
          this.getList()
          this.closeDrawer()
        },(err)=>{
          this.$message.error(err)
        })
      }

    },

    // 删除
    handleClickDelete(id) {
      sensitivityDelete({ id }).then((res) => {
        this.$message.success(this.$t('user.verification-code.required111566110577133'));
        this.getList()
      })
    },
    cancel() {
      this.$message.warning(this.$t('user.verification-code.required111566110577231'));
    },
  }
}
</script>
<style lang="less" scoped>
/deep/.ant-form-item-label {
    display: inline-block;
    overflow: visible !important;
    line-height: 39.9999px;
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;
}
:deep(.sp-item) {
  .ant-form-item-label-left {
    text-align: left;
    padding-left: 10px;
    width: 60px;
  }
}
</style>
